<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title></title>
<script type="text/javascript">
//初始化项目下拉框
$.ajax({
	url: "management/serviceitem/listitem",
	type:"POST",
	success:function(data){
		$(data).each(function(n){
            $("<option/>").html(this.name).val(this.serviceItemId)
            .appendTo("#serviceItemId");
        });
	}
});
//初始化素材下拉框
$.ajax({
	url: "management/material/listMaterial",
	type:"POST",
	success:function(data){
		$(data).each(function(n){
            $("<option/>").html(this.name).val(this.materialId)
            .appendTo("#materialId");
        });
	}
});
//初始化门店列表
$.ajax({
	url: "management/shop/listshop",
	type:"POST",
	success:function(data){
		$(data).each(function(n){
            $("<option/>").html(this.name).val(this.shopId)
            .appendTo("#list1");
        });
	}
});
sortitems = 1;  // Automatically sort items within lists? (1 or 0) 

function move(fbox,tbox) { 
 for(var i=0; i<fbox.options.length; i++) { 
   if(fbox.options[i].selected && fbox.options[i].value != "") { 
   var no = new Option(); 
   no.value = fbox.options[i].value; 
   no.text = fbox.options[i].text; 
   tbox.options[tbox.options.length] = no; 
   fbox.options[i].value = ""; 
   fbox.options[i].text = ""; 
      } 
 } 
BumpUp(fbox); 
if (sortitems) SortD(tbox); 
} 

  function moveall(fbox,tbox) { 
 for(var i=0; i<fbox.options.length; i++) { 
   if(fbox.options[i].value != "") { 
   var no = new Option(); 
   no.value = fbox.options[i].value; 
   no.text = fbox.options[i].text; 
   tbox.options[tbox.options.length] = no; 
   fbox.options[i].value = ""; 
   fbox.options[i].text = ""; 
      } 
 } 
BumpUp(fbox); 
if (sortitems) SortD(tbox); 
} 


function BumpUp(box)  { 
 for(var i=0; i<box.options.length; i++) { 
   if(box.options[i].value == "")  { 
      for(var j=i; j<box.options.length-1; j++)  { 
      box.options[j].value = box.options[j+1].value; 
      box.options[j].text = box.options[j+1].text; 
      } 
   var ln = i; 
   break; 
      } 
 } 
 if(ln < box.options.length)  { 
 box.options.length -= 1; 
 BumpUp(box); 
    } 
} 

function SortD(box)  { 
var temp_opts = new Array(); 
var temp = new Object(); 
for(var i=0; i<box.options.length; i++)  { 
temp_opts[i] = box.options[i]; 
} 

for(var x=0; x<temp_opts.length-1; x++)  { 
  for(var y=(x+1); y<temp_opts.length; y++)  { 
    if(temp_opts[x].text > temp_opts[y].text)  { 
    temp = temp_opts[x].text; 
    temp_opts[x].text = temp_opts[y].text; 
    temp_opts[y].text = temp; 
    temp = temp_opts[x].value; 
    temp_opts[x].value = temp_opts[y].value; 
    temp_opts[y].value = temp; 
       } 
     } 
} 

for(var i=0; i<box.options.length; i++)  { 
box.options[i].value = temp_opts[i].value; 
box.options[i].text = temp_opts[i].text; 
   } 
} 
$(function() {
	$("form").validate({
		rules : {
			"totalNum" : {
				required : true,
				positiveinteger :true
			},
			"materialId" : {
				required : true
			},
			"serviceItemId" : {
				required : true
			},
			"endDate" : {
				required : true,
				flutredate : true
			},
			"shopList" : {
				required : true
			}
		},
		messages : {
			"totalNum" : {
				required : "请输入需要新增卡券的数量",
				positiveinteger:"数量请输入正整数"
				
			},
			"materialId" : {
				required : "请选择推送素材"
			},
			"serviceItemId" : {
				required : "请选择服务项目"
			},
			"endDate" : {
				required : "请选择到期日期",
				flutredate :"请选择当前日期之后的日期"
			}
		}
	});
	$("#divId").hide();
	$("#shopRange").change(function(){
		if($(this).val()=="SYMD"){$("#divId").hide();}
		if($(this).val()=="ZDMD"){$("#divId").show();}
	});
});
function submitPost(){
	//提交前让选中框中的所有项都选中
	$("#shopList option").attr("selected","selected");
	$("#form").submit();
}
</script>
</head>
<body>
	<ol class="am-breadcrumb am-breadcrumb-slash am-padding" style="margin-bottom: 0px;">
		<li><a href="management/index">首页</a></li>
		<li><a href="management/coupon/index">卡券信息维护</a></li>
		<li class="am-active">卡券新增</li>
	</ol>
	<div class="am-g">
		<div class="am-u-md-12">
			<form class="am-form am-form-horizontal" id="form" name="form"  method="post" action="management/coupon/save">
				<!-- <input type="hidden" name="compId" id="compId" value="${t.compId }" class="am-form-field am-input-sm"><!-- shopId -->
				<div class="am-tabs am-margin">
					<ul class="am-tabs-nav am-nav am-nav-tabs">
						<li class="am-active"><a href="javascript:void(0)">基本信息</a></li>
					</ul>
					<div class="am-tabs-bd">
						<div class="am-tab-panel am-active">
						
							<div class="am-form-group">
								<label class="am-u-md-2 am-text-right am-form-label">数量</label>
								<div class="am-u-md-4 am-u-end">
									<input type="text" id="totalNum" name="totalNum" maxlength="11" class="am-form-field am-input-sm">
								</div>
							</div>
							
							<div class="am-form-group">
								<label class="am-u-md-2 am-text-right am-form-label">推送素材</label>
								<div class="am-u-md-4 am-u-end">
									<select id="materialId" name="materialId" >
										<option value="">---请选择---</option>
									</select>
								</div>
							</div>
							
							<div class="am-form-group">
								<label class="am-u-md-2 am-text-right am-form-label">服务项目</label>
								<div class="am-u-md-4 am-u-end">
									<select id="serviceItemId" name="serviceItemId" >
										<option value="">---请选择---</option>
									</select>
								</div>
							</div>
							
							<div class="am-form-group">
								<label class="am-u-md-2 am-text-right am-form-label">到期日期</label>
								<div class="am-u-md-4 am-u-end">
									<input type="text" id="endDate" placeholder="请选择到期日期" name="endDate" class="am-form-field am-input-sm" data-am-datepicker readOnly>
								</div>
							</div>
							<div class="am-form-group">
								<label class="am-u-sm-2 am-form-label">适用门店范围</label>
								<div class="am-u-sm-4 am-u-end">
									<t:dictSelect tabName="COUPON" colName="SHOP_RANGE" field="shopRange" id="shopRange" ></t:dictSelect>
								</div>
							</div>
							<div id="divId" class="am-form-group">
								<label class="am-u-md-2 am-text-right am-form-label">适用门店</label>
								<div class="am-u-md-4 am-u-end">
										<table border="0"> 
											<tr><td>请选择门店</td><td></td><td>选中的门店</td></tr>
											<tr> 
											<td>
												<select multiple id="list1" size="8" name="list1" style="width:245px" > 
												</select>
											</td> 
											<td> 
												<button type="button" value="-"onclick="move(this.form.list1,this.form.shopList)" name="B1">
													<span class="am-icon-angle-right"></span>
												</button>
												 <br>
												<button type="button"  onclick="move(this.form.shopList,this.form.list1)" name="B2">
												 	<span class="am-icon-angle-left"></span>
												</button>
												<br>
												<button type="button" onclick="moveall(this.form.list1,this.form.shopList)" name="B3">
												 	<span class="am-icon-angle-double-right"></span>
												 </button>
												 <br>
												<button type="button"  onclick="moveall(this.form.shopList,this.form.list1)" name="B4"> 
													<span class="am-icon-angle-double-left"></span>
												</button>
												<br>
											</td> 
											<td>
												<select multiple size="8" id="shopList" name="shopList" style="width:245px"> 
												</select>
											</td> 
											</tr> 
										</table> 
								</div>
							</div>
							
						</div>
					</div>
				</div>
				<div class="am-margin">
					<button class="am-btn am-btn-primary am-btn-xs" type="button" onclick="submitPost();"><span class="am-icon-check"></span> 保存</button>
					<a href="javascript:;" onClick="javascript:history.back(-1);" class="am-btn am-btn-primary am-btn-xs"><span class="am-icon-times"></span> 取消</a>
				</div>
			</form>
		</div>
	</div>
</body>
</html>
